<!-- src/components/TaskList.vue -->
<template>
  <div class="bg-white p-4 rounded-lg shadow-sm">
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
      <h2 class="text-xl font-semibold mb-2 md:mb-0">任务列表</h2>
      <div class="flex items-center space-x-2">
        <!-- 搜索框 -->
        <div class="relative">
          <input
            type="text"
            v-model="searchQuery"
            @input="setSearch"
            placeholder="搜索任务..."
            class="pl-9 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
          <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
        
        <!-- 排序选择 -->
        <select
          v-model="sortBy"
          @change="setSort"
          class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <option value="date">按创建时间</option>
          <option value="priority">按优先级</option>
          <option value="dueDate">按截止日期</option>
        </select>
      </div>
    </div>
    
    <!-- 批量操作工具栏 -->
    <div
      v-if="selectedTaskIds.length > 0"
      class="bg-blue-50 border border-blue-200 p-3 rounded-md mb-4"
    >
      <div class="flex items-center justify-between">
        <span class="text-sm font-medium text-blue-800">
          已选择 {{ selectedTaskIds.length }} 个任务
        </span>
        <div class="flex flex-wrap gap-2">
          <button
            @click="batchMarkAsCompleted(true)"
            class="px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white rounded-md text-sm transition-colors"
          >
            标记为完成
          </button>
          <button
            @click="batchMarkAsCompleted(false)"
            class="px-3 py-1.5 bg-gray-500 hover:bg-gray-600 text-white rounded-md text-sm transition-colors"
          >
            标记为未完成
          </button>
          <select
            v-model="batchPriority"
            @change="batchUpdatePriority"
            class="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">更改优先级</option>
            <option value="high">高</option>
            <option value="medium">中</option>
            <option value="low">低</option>
          </select>
          <button
            @click="batchDelete"
            class="px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white rounded-md text-sm transition-colors"
          >
            删除所选
          </button>
        </div>
      </div>
    </div>
    
    <!-- 优先级统计 -->
    <div class="flex flex-wrap gap-2 mb-4">
      <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">
        高优先级: {{ priorityCounts.high }}
      </span>
      <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">
        中优先级: {{ priorityCounts.medium }}
      </span>
      <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">
        低优先级: {{ priorityCounts.low }}
      </span>
      <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">
        已完成: {{ completedCount }} / 总共: {{ totalCount }}
      </span>
    </div>
    
    <!-- 任务列表 -->
    <ul class="space-y-2">
      <li
        v-for="task in filteredTasks"
        :key="task.id"
        class="p-3 border border-gray-200 rounded-md flex items-center justify-between transition-all hover:shadow-sm"
      >
        <div class="flex items-center">
          <!-- 批量选择复选框 -->
          <input
            type="checkbox"
            v-model="selectedTaskIds"
            :value="task.id"
            class="mr-3 h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded"
          >
          
          <!-- 任务完成状态复选框 -->
          <input
            type="checkbox"
            :checked="task.completed"
            @change="toggleTaskCompleted(task.id)"
            class="mr-3 h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded"
          >
          
          <span
            class="flex-1"
            :class="{ 'line-through text-gray-400': task.completed }"
          >
            {{ task.title }}
          </span>
          
          <!-- 优先级标签 -->
          <span
            v-if="task.priority"
            class="ml-2 px-2 py-0.5 rounded-full text-xs font-medium"
            :class="{
              'bg-red-100 text-red-800': task.priority === 'high',
              'bg-yellow-100 text-yellow-800': task.priority === 'medium',
              'bg-green-100 text-green-800': task.priority === 'low'
            }"
          >
            {{ task.priority === 'high' ? '高' : task.priority === 'medium' ? '中' : '低' }}
          </span>
          
          <!-- 截止日期 -->
          <span
            v-if="task.dueDate"
            class="ml-2 px-2 py-0.5 rounded-full text-xs bg-gray-100 text-gray-800"
          >
            {{ formatDate(task.dueDate) }}
          </span>
          
          <!-- 标签 -->
          <div class="flex flex-wrap ml-2">
            <span
              v-for="tag in task.tags"
              :key="tag"
              class="ml-1 px-2 py-0.5 rounded-full text-xs bg-blue-100 text-blue-800"
            >
              {{ tag }}
            </span>
          </div>
        </div>
        <button
          @click="deleteTask(task.id)"
          class="text-red-500 hover:text-red-700"
        >
          <i class="fa fa-trash"></i>
        </button>
      </li>
    </ul>
    
    <!-- 空状态提示 -->
    <div v-if="filteredTasks.length === 0" class="text-center py-8 text-gray-500">
      <i class="fa fa-check-circle text-3xl mb-2 block"></i>
      <p>没有任务，请添加新任务</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useTaskStore } from '../store/taskStore';

const taskStore = useTaskStore();
const searchQuery = ref('');
const sortBy = ref('date');
const selectedTaskIds = ref([]);
const batchPriority = ref('');

// 获取过滤后的任务
const filteredTasks = computed(() => taskStore.filteredTasks);
const priorityCounts = computed(() => taskStore.priorityCounts);
const completedCount = computed(() => 
  taskStore.tasks.filter(task => task.completed).length
);
const totalCount = computed(() => taskStore.tasks.length);

// 标记任务完成状态
const toggleTaskCompleted = (id) => {
  taskStore.updateTask(id, { completed: !taskStore.tasks.find(t => t.id === id)?.completed });
};

// 删除任务
const deleteTask = (id) => {
  taskStore.deleteTask(id);
};

// 设置搜索
const setSearch = () => {
  taskStore.setSearch(searchQuery.value);
};

// 设置排序
const setSort = () => {
  taskStore.setSort(sortBy.value);
};

// 批量标记完成/未完成
const batchMarkAsCompleted = (completed) => {
  if (selectedTaskIds.value.length > 0) {
    taskStore.batchToggleCompleted(selectedTaskIds.value, completed);
    selectedTaskIds.value = [];
  }
};

// 批量更新优先级
const batchUpdatePriority = () => {
  if (selectedTaskIds.value.length > 0 && batchPriority.value) {
    taskStore.batchUpdatePriority(selectedTaskIds.value, batchPriority.value);
    selectedTaskIds.value = [];
    batchPriority.value = '';
  }
};

// 批量删除任务
const batchDelete = () => {
  if (selectedTaskIds.value.length > 0) {
    if (confirm(`确定要删除选中的 ${selectedTaskIds.value.length} 个任务吗？`)) {
      taskStore.batchDelete(selectedTaskIds.value);
      selectedTaskIds.value = [];
    }
  }
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};
</script>